import React, { Component } from 'react';
import { connect } from "react-redux";
import { Button } from "antd"
import tipImg from 'images/audit-tips/tip-white.png'
import { eventTrack , messages } from "share/common";

import Condition from "components/condition";
import AuditTipsDetail from "./detail";
import "styles/financial-management/new-finance-audit/components/audit-tips.scss"

const { If, ElseIf, Else } = Condition;

@connect(mapStateToProps)
class AuditTipsButton extends Component {

  state = {
    detailVisible: false,
  };

  handleView = () => {
    const { tenantInfo, from } = this.props;
    const fromMap = {
      auditList: '审核列表页',
      auditDetail: '审核详情页',
      expenseDetail: '费用详情页'
    };
    eventTrack({
      category: '打开审核小技巧',
      action: fromMap[from],
      label: tenantInfo.tenantName
    });
    this.setState({
      detailVisible: true
    })
  };

  render() {
    const { type, style, text, pageKey, radioKey, collapseKey, lampStyle } = this.props;
    const { detailVisible } = this.state;
    return (
      <div className="audit-tips-button" style={style || {}}>
        <Condition>
          <If value={type === "button"}>
            <Button type="primary" onClick={this.handleView}>
              {text || messages('expense-14.key141')/*查看更多*/}
            </Button>
          </If>
          <ElseIf value={type === 'text'}>
            <a onClick={this.handleView}>{text}</a>
          </ElseIf>
          <Else>
            <div className="audit-tips-button-lamp" style={lampStyle || {}}>
              <Button className="audit-tips-button-lamp-box" onClick={this.handleView}>
                <img src={tipImg} alt=""/>{messages('expense-14.key142')/*实用技巧*/}
              </Button>
            </div>
          </Else>
        </Condition>
        {detailVisible && (
          <AuditTipsDetail
            visible={detailVisible}
            pageKey={pageKey}
            radioKey={radioKey}
            collapseKey={collapseKey}
            onCancel={() => this.setState({ detailVisible: false })}
          />
        )}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    tenantInfo: state.login.tenant
  }
}

export default AuditTipsButton;
